<template>
	<view class="content d-bg-gray">
		<view class="uni-padding-wrap h460" style="width: 100%;">
			<swiper class="swiper h460" indicator-dots="true" autoplay="true">
				<swiper-item>
					<view class="swiper-item">
						<image class="h460" style="width:100%;" mode="aspectFill"  src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="h460" style="width:100%;" mode="aspectFill" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="wfull d-bg-white pl40">
			<view class="wfull h70  lh70 mt20 al">
				<text class="d-text-golden f32">￥</text><text class="d-text-golden f48">99</text><text class="d-text-qgray f32 pl10" style="text-decoration: line-through;">￥198</text>
			</view>
			<view class="h80 mt20">
				<text class="d-text-black f36 b">【幸福西饼新品 下午茶双拼12块】</text>
			</view>
			<view class="h80 pr40 d-flex-level">
				<view>			
					<uni-icons type="checkbox-filled" color="#ff5919" size="20"></uni-icons>
					<text class="d-text-subhead f32">过期退</text>
					<uni-icons type="checkbox-filled" color="#ff5919" size="20" class="ml20"></uni-icons>
					<text class="d-text-subhead f32">随时退</text>
					<uni-icons type="help" color="#cbcbcb" size="20" class="ml20"></uni-icons>
				</view>
				<view>
					<text class="d-text-gray f24">已售2.2万份</text>
				</view>
			</view>
		</view>
		<view class="wfull pl40 h320 d-bg-white mt20 pt40">
			<view class="h140">
				<view class="lh70 d-flex">
					<view class="w90">
						<text class="d-text-subhead f32">优惠</text>
					</view>
					<view class="f24">
						<text class="d-bg-golden d-tag">限购</text>
						<text class="d-text-subhead pl10">限购30件</text>
					</view>
				</view>
				<view class="lh70 pl90 d-flex-level">
					<view>
						<text class="d-bg-golden d-tag f24">超级会员</text>
					</view>
					<view class="pr40">
						<text class="d-text-subhead f28">查看权益></text>
					</view>
				</view>
			</view>
			<view class="h180">
				<view class="lh70 d-flex">
					<view class="w90">
						<text class="d-text-subhead f32">规则</text>
					</view>
					<view class="f28 d-text-subhead">
						<text class="">可随时取消</text>
					</view>
				</view>
				<view class="lh70 d-flex">
					<view class="w180">
						<text class="d-text-subhead f32">排队人数</text>
					</view>
					<view class="f28 d-text-subhead">
						<text class="">6人</text>
					</view>
				</view>
			</view>
		</view>
		<view class="h120 pt20 d-bg-white wfull mt10 pl40 pb10 d-flex d-flex-ac">
			<view class="w100 ac">
				<image class="avatar" mode="aspectFill" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg"></image>
				<view class="lh10">
					<text class="d-text-subhead f24">品牌店</text>
				</view>
			</view>
			<view class="w100 ac">
				<uni-icons type="star-filled" size="30" color="#ff5919"></uni-icons>
				<view class="lh10">
					<text class="d-text-subhead f24">收藏</text>
				</view>
			</view>
			<view class="w500 ac d-flex">
				<button type="primary" class="btnl">预约排队</button>
				<button type="primary" class="btnr">实时排队</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {uniIcons },
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.btnl{width: 250rpx;background: #0268ff !important;border-radius: 36rpx 0 0 36rpx; height: 80rpx;line-height: 80rpx;}
	.btnr{width: 250rpx;background: #0496fe !important; border-radius: 0 36rpx 36rpx 0; height: 80rpx;line-height: 80rpx;}
	.d-tag{padding: 4rpx 12rpx; border-radius: 30rpx;}
	.avatar{width: 60rpx; height:60rpx; border-radius: 30rpx;}
</style>
